<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:35:53
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="goods">
    <my-top :toplist="toplist" @handeltopbutton="handeltopbutton"></my-top>
    <my-table
      :tablelist="tablelist"
      :tableData="tableData"
      @handeltablebutton="handeltablebutton"
      :pager="pager"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></my-table>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import GoodsModel from "@/api/goods";
import { GoodsData } from "@/type/goods";
import { ElMessage, ElMessageBox } from "element-plus";
import MyTop from "@/components/child/MyTop.vue";
import MyTable from "@/components/child/MyTable.vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: { MyTop, MyTable },
  setup() {
    const router = useRouter();
    onMounted(() => {
      postgoodslist();
    });
    const datas = reactive({
      topVal: "",
    });
    const data = reactive(new GoodsData());
    // 页
    const handleSizeChange = (size: number) => {
      data.pager.pageSize = size;
      postgoodslist().then(() => ElMessage.success("搜索成功"));
    };
    // 条
    const handleCurrentChange = (page: number) => {
      data.pager.currentPage = page;
      postgoodslist().then(() => ElMessage.success("搜索成功"));
    };
    const postgoodslist = async () => {
      const response = await GoodsModel.postgoodslist(
        data.pager.currentPage,
        data.pager.pageSize,
        datas.topVal
      );
      if (response.data.meta.status == "200") {
        const { goods, total } = response.data.data;
        data.tableData = goods;
        data.pager.total = total;
      }
    };
    // top 按钮
    interface handeltopbutton {
      action: any;
      topVal: any;
    }
    const handeltopbutton = (anyEI: handeltopbutton) => {
      const { action, topVal } = anyEI;
      if (action == "seach") {
        // 搜索
        datas.topVal = topVal.seachVal;
        postgoodslist().then(() => ElMessage.success("搜索成功"));
      } else if (action == "add") {
        //添加
        router.push("/add");
      }
    };
    // table 按钮
    interface handeltablebutton {
      action: any;
      id: any;
    }
    const handeltablebutton = (anyEI: handeltablebutton) => {
      const { action, id } = anyEI;
      if (action == "delete") {
        deletegoosdlist(id);
      } else if (action == "edit") {
        ElMessage.success("待开发");
      }
    };
    // 删除方法
    const deletegoosdlist = (id: number) => {
      ElMessageBox.confirm("确定要删除这条数据吗?", "警告！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const response = await GoodsModel.deletegoodslist(id);
          if (response.data.meta.status == "200") {
            postgoodslist().then(() =>
              ElMessage.success(response.data.meta.msg)
            );
          }
        })
        .catch(() => {
          ElMessage.error("取消删除");
        });
    };
    return {
      ...toRefs(data),
      handeltopbutton,
      handeltablebutton,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
</script>
